@import "../../ui/style/theming";
@import "../../ui/style/spacing";
@import "../../ui/style/typography";

@mixin gd-note-preview-theme($theme) {
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);
    $primary: map-get($theme, primary);

    .NotePreview {
        background-color: gd-color($background, background-highlight);

        &__title {
            border-bottom: 1px solid gd-color($foreground, divider);

            > h1 {
                user-select: text !important;
            }
        }

        &__snippetHtml {
            $baseline: 12px * 1.5;

            pre {
                margin: $baseline 0;
                padding: $spacing;
                overflow-x: auto;
                font-weight: $font-weight-semiBold;
                background-color: gd-color($background, background);
            }

            > * {
                user-select: text !important;
            }

            p {
                margin: 0 0 $baseline 0;
                font-weight: $font-weight-normal;

                > code {
                    display: inline-block;
                    padding: 0 $spacing-half;
                    border-radius: 2.5px;
                    font-weight: $font-weight-semiBold;
                    background-color: gd-color($background, background);
                }
            }

            a {
                color: gd-color($primary);
                font-weight: $font-weight-semiBold;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;
                }
            }

            h1 {
                font-size: 2em;
                font-weight: $font-weight-bold;
                line-height: 1;
                margin-top: 36px - 24px; // 2 * $baseline - line-height
                margin-bottom: $baseline;
            }

            h2 {
                font-size: 1.5em;
                font-weight: $font-weight-bold;
                line-height: 1;
                margin-top: 18px;
                margin-bottom: $baseline;
            }

            h3 {
                font-size: 1.25em;
                font-weight: $font-weight-bold;
                line-height: 1;
                margin-top: 21px;
                margin-bottom: $baseline;
            }

            h4 {
                font-size: 1em;
                font-weight: $font-weight-bold;
                line-height: 1;
                margin-top: 18px;
                margin-bottom: $baseline;
            }

            h5, h6 {
                font-size: .875em;
                font-weight: $font-weight-bold;
                line-height: 18px;
                margin: 0 0 $baseline 0;
            }

            blockquote {
                margin: $baseline 0;
                padding: 0 0 0 $spacing-double;
                border-left: 5px solid gd-color($foreground, secondary-text);

                font-weight: $font-weight-normal;
                color: gd-color($foreground, secondary-text);
            }

            ul, ol {
                margin: $baseline 0;
                padding: 0 0 0 $spacing-double;
            }

            ul {
                list-style: disc;
            }

            li > ul, li > ol {
                margin: 0;
            }

            img {
                max-width: 100%;
                display: block;
                margin: 0 auto;
            }
        }

        &__snippet--code {
            .hljs-comment,
            .hljs-quote {
                color: gd-color($color-green, 800);
                font-style: italic;
            }

            .hljs-keyword,
            .hljs-selector-tag,
            .hljs-subst {
                color: gd-color($primary);
                font-weight: $font-weight-bold;
            }

            .hljs-number,
            .hljs-literal,
            .hljs-variable,
            .hljs-template-variable,
            .hljs-tag .hljs-attr {
                color: gd-color($primary);
            }

            .hljs-string,
            .hljs-doctag {
                color: map-get($color-deep-orange, 600);
            }

            .hljs-title,
            .hljs-section,
            .hljs-selector-id {
                color: gd-color($foreground, text);
                font-weight: $font-weight-semiBold;
            }

            .hljs-subst {
                font-weight: $font-weight-normal;
            }

            .hljs-type,
            .hljs-class .hljs-title {
                color: gd-color($primary);
                font-weight: $font-weight-bold;
            }

            .hljs-tag,
            .hljs-name,
            .hljs-attribute {
                color: gd-color($primary, darker);
            }

            .hljs-regexp,
            .hljs-link {
                color: map-get($color-green, 400);
            }

            .hljs-symbol,
            .hljs-bullet {
                color: map-get($color-purple, 400);
            }

            .hljs-built_in,
            .hljs-builtin-name {
                color: gd-color($foreground, secondary-text);
            }

            .hljs-meta {
                color: gd-color($foreground, secondary-text);
                font-weight: $font-weight-bold;
            }

            .hljs-deletion {
                // TODO
                background: #fdd;
            }

            .hljs-addition {
                // TODO
                background: #dfd;
            }

            .hljs-emphasis {
                font-style: italic;
            }

            .hljs-strong {
                font-weight: $font-weight-bold;
            }
        }
    }
}
